- Special Edition Using Visual Basic Script -

CHAPTER 11 - Designing Visual Basic Script Applications

by Yusuf Malluf

• Using Visual Basic Script for designing Web applications
• You can use Visual Basic Script for designing applications inside your Web pages. These applications can be anything from games to displaying today's date and time.
• Using Dynamic Web Content
• Static Web pages are a thing of the past. With the introduction of scripting and object capable browsers, one can design highly interactive pages on the Internet without using several mix-and-match alternatives.
• The Internet Explorer 3.0 Object Model
• The Internet Explorer Object model is one of the entities which is most important to designing your applications. This chapter gives coverage to the object model.
• Using the ActiveX Controls and the ActiveX Control Pad
• The ActiveX controls are the other entities which are important to designing you Visual Basic Script based HTML applications. We will cover the intrinsic ActiveX controls as well as some ActiveX controls included in the ActiveX control pad.

From this point, if you have followed the chapters sequentially, you have a pretty good understanding of the concepts of Visual Basic Script. In this case, you have a pretty good understanding of the ActiveX control pad. You have also seen some usage of the ActiveX controls and you have seen many of the principle functions of Visual Basic Script, not to mention several examples. Now the question is, how can I put this all together to design an excellent application for my Web site? This chapter introduces you to the Internet Explorer 3.0 Object model, which is basically what you use to control different objects of the browser, such as the window object, the document object and several others. A brief explanation on objects is provided too, in case you haven't had much experience with them.

Moving From Static to Dynamic HTML Pages

It is possible that you were using the Internet in the time when browsers served very static and unchanging content. These first-generation browsers had a handful of HTML commands for different styles of text and inserting pictures. This was an extraordinary improvement over other Internet information systems at the timeùsuch as Gopher. Next came HTML 2.0 and the second-generation browsers that supported forms and the common gateway interface (CGI). CGI was used to process and store the data of the forms that the new model of HTML offered, with the addition to proprietary tags instituted by different browsers.

Today, the expansion of HTML 3.0 and third-generation browsers is unbelievable. Many different companies are rolling out their own browsers; these browsers have the capability to serve truly dynamic web content. With scripting capabilities and the ability to insert a plethora of objects into your pages, you can now have more creative control over how your Web pages are presented. Let's move on to how to create these killer applications.

Using VBScript for Designing Web Applications

Before you can understand how to create these Visual Basic Script applications, you must understand a few concepts that you use to design those applications. The most important concept that you may need to understand is how objects work. Understanding how objects are used is a prerequisite to understanding how the Internet Explorer 3.0 object model works, to understanding the ActiveX controls, and understanding how to integrate these two with elements of an HTML page. You also need to have a pretty good working knowledge of Visual Basic itselfùspecifically, how events and procedures work. These topics are discussed in this section as well. Remember, objects and Visual Basic Script are closely knit; you must think of designing your applications on a level that considers them both.

Understanding the Basics of Objects

An Object is simply an interactive entity that you can control by its methods, properties and events. A method is a procedure, or rather, a set of instructions which tells the object to perform a certain task. A property is some sort of attribute of an object. An event is when some sort of action happens to the object. Let's take a human for our example object. A human has methods, properties and events. A method might be eating, digestion, gestation, or a number of other processes. A property might be eye color, skin pigmentation or a number of things which describe the human object. An event for a human might be when the human is pushed.

Now, in terms of computers, let's take an ActiveX control for an example object. We will use the label object (object and control virtually mean the same thing). The label control consists primarily of properties and has one method. Some of the label control's properties include its caption, its background color, its foreground color, its size and its font. Its method is the About Box method which displays an about box with information about the control when called. An event for the label control is when the mouse pointer is moved over that control. There is a specific tag for inserting objects in an HTML page and this tag is the <OBJECT> tag. This will be covered in the next section.

Using the <OBJECT> Tag

The <OBJECT> tag, as you already know, is used to insert objects of various types in your Web page, but we will primarily focus on the ActiveX objects. The general syntax for an object tag is:

<OBJECT>

<PARAM>

...

</OBJECT>

There are two tags used in this syntax: the <OBJECT> tag and the <PARAM> tag. The <OBJECT> tag is used to define what the object is and any other general attributes related to the object that are called or defined with the <OBJECT> tag. The <PARAM> tag is used to set the different properties of the object specified by the <OBJECT> tag those <PARAM> tags are nested in. The attributes for the <OBJECT> tag are listed in Table 11.1 and the attributes for the <PARAM> tag are listed in Table 11.2.

Table 11.1 The Attributes of the <OBJECT> Tag

Table 11.2 Attributes for the <PARAM> Tag

There are other attributes which are used with the <OBJECT> and the <PARAM> according to the specification, but these attributes are all one needs to use ActiveX and other objects in a page.

Now that we know what attributes are used by an ActiveX control, let's look at an example control. The code in Listing 11.1 is an example of the ActiveX label control. Figure 11.1 illustrates this listing. FIRSTEXAMP.HTM can be found on the CD that accompanies this book.

Listing 11.1 FIRSTEXAMP.HTMùThis Is a Simple Demonstration of an ActiveX Object

FIG. 11.1

This label appears to be nothing but text, but has many uses.

Consider Listing 11.1 for a moment. Several attributes are defined for the <OBJECT> tag which gives useful information about the object being used. First the object is named "mylabel," then the width and height properties for the tag are defined, then the control is specified with the CLASSID attribute. The value "CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" is what identifies the object on your system, through your registry. The nested <PARAM> tags contain the properties of the label object. As you already know, the NAME attribute is used to specify which property to use and the VALUE attribute is used to assign a value to that property. This entire process is automated, as you have read, with the ActiveX control pad which was covered fully in Chapter 3, "Introducing the ActiveX Control Pad." There is a properties window in the control pad editor which allows you to adjust the properties of any control.

Looking Closer at Scripting and the <SCRIPT> Tag

The <SCRIPT> tag was mentioned briefly in Chapter 2, "Review of HTML." The <SCRIPT> tag is where all Visual Basic Script statements go. Several tags (primarily form input controls) and ActiveX controls can access certain procedures (subroutines) of your script based on an event. An event, as mentioned earlier, is when the user triggers some action related to an object. A mouse-pointer moving over a button is an example of an event. Events can be called from the <A>, <BODY>, <INPUT>, and <OBJECT> tags. There are several ways to control the events of these tags. One method of doing this is by using the event as an attribute; another method is using that method in a subroutine. Examine Listing 11.2 (OBEVENTS.HTM can also be accessed off the accompanying CD). Figure 11.2 illustrates this listing.

Listing 11.2 OBEVENTS.HTMùThis Listing Demonstrates the Usage of Objects with Events

FIG.11.2

The ActiveX label control is changed by the button control and by itself through the use of events.

In this example, an ActiveX label object is used, but some scripting features and some events have been added. First, an ActiveX label control is defined, then a button control is added using the <INPUT> tag; some events with the scripts have also been used. When the user clicks the button, the label changes. When the user clicks the label after the button has been pressed, the original label returns. Both of these actions are events. When a user clicks the button, an event occurred which caused the label to change. The OnClick attribute in the <INPUT> tag caused that event to trigger. The OnClick attribute itself is an event and its value calls a Visual Basic Script procedure which causes the label to change.

The contents of the label are changed back by just using a script and additional attributes to the <OBJECT> tag of the label are not included. In the script used in this page, there are two subroutines. The first subroutine is used by the button control, and the second subroutine is used by the label object to change its contents back. As you notice in the second subroutine, the name of the label object (MyLabel) is followed by and underscore and the name of an event. This means, that when the OnClick event is true (when the event occurs) for the object named, then the statements contained in this subroutine are to be evaluated.

With form controls, objects and other entities, you can use their events as attributes if the controls you are using them with supports that event. You can also use the event in a subroutine as well. Table 11.3 lists some attributes to the <SCRIPT> tag. The next section will cover the syntax for using events, methods, and properties of objects in Visual Basic Script.

The ActiveX control pad greatly simplifies the task of assigning Visual Basic commands for different events of the objects and controls on your page, so you can focus more on the design of your application.

Table 11.3 Additional <SCRIPT> Tag Attributes

Table 11.4 A Sample Table of Some Events Used for Different Objects by VBScript

Visual Basic Scripting

This section's main goal is to familiarize you with some of the elements of Visual Basic Script that you need to know in order to understand how Visual Basic Script works with objects and controls on a page. To that end, this section focuses on the syntax of how to call methods, how events are triggered, and how to set properties for different objects and controls.

Setting Properties for Controls and Objects

Setting properties for different objects in a page is perhaps one of the simplest tasks to do in Visual Basic Script. The general syntax for doing this is:

<SCRIPT>

...

ObjectName.property = value

...

</SCRIPT>

ObjectName is the name or identity of your object specified by the ID or NAME attribute, property is a specific property for the object named by ObjectName, and value is the value that property is set to. Consider this piece of code from Listing 11.2:

...

MyLabel.Caption="Watch me change!!"

MyLabel.ForeColor = "65280"

MyLabel.BackColor = "14527197"

MyLabel.FontName = "Comic Sans MS"

...

It is always possible (especially in the Internet Explorer 3.0 Object model) for child objects (nested objects) to exist. If a specific property is needed of a child object, append a . (period) followed by the name of the child object after ObjectName, then specify the property in the same manner as shown in the syntax (for example: object.child1.value = "some stuff here". object is the name of the object, child1 is the name of the child object and value is a property of the object child1). This method holds true for any number of nested objects, should they exist.

The preceding section of code illustrates several properties used by Visual Basic Script for the object named MyLabel, which is a text label. The first property is the Caption property, set to the value of "Watch me change!!". Next, the properties of ForeColor (text color of the text) and of BackColor (background color of the text) are set, and finally, the FontName property is set to Comic Sans MS. This is how you set properties for any object or control on the page. The properties for ActiveX controls vary from control to control, and the properties for controls specified by the <INPUT> tag are the attributes used in that tag (such as VALUE and NAME). Other tags on the page have properties too, including the document itself, anchors, and other objects described in the Internet Explorer 3.0 object model section.

Triggering Events

Visual Basic Script is known as an event-driven language. Everything in Visual Basic Script operates by events. Some of the events listed in Table 11.4 work with many controls and objects. There are a few ways for specifying what happens in a script when an event occurs. The following list shows the syntax of three ways for specifying what happens when a certain event is triggered:

• Specifying events as attributes: You can specify an event as an attribute of a tag for an object or control on a page. The value of this attribute should be a subroutine which you have already defined inside a Visual Basic Script tag. The LANGUAGE attribute (see the attributes of the <SCRIPT> tag in Table 11.3) must be included as an additional attribute to this tag, if the specified subroutine is to be used. The general syntax is:
• <... EventName="method" LANGUAGE="VBScript" ...>
• where EventName is any valid event for the corresponding object or control and method is the name of the subroutine that is evaluated when the specified event occurs. The LANGUAGE attribute is used to specify which language to use and must be included when an event is specified on a page.
• Specifying events for an element in a script tag: Using the attributes described in Table 11.3, you can specify, in the <SCRIPT> tag what event of what object to use the following code for. This is useful if you have multiple subroutines and statements outside of subroutines that need to exist in your script. The syntax for doing this is:
• <SCRIPT LANGUAGE="VBSCRIPT" FOR="ObjectName" EVENT="EventName">
• ... </SCRIPT>
• The LANGUAGE attribute is used to specify which language to use (Visual Basic Script of course), the FOR attribute is used to specify the name of the control or object to use the following code for, and the EVENT attribute specifies what event causes the following code to be invoked.
• Specifying an event by using a subroutine: This may well be the simplest method of triggering an event and executing some code after the event has occurred. This method uses a subroutine with the same name as the object or control you intend to use with an underscore and the name of the event appended to it. The general syntax follows:
• <SCRIPT LANGUAGE="VBScript">
• ...
• sub ObjectName_ObjectEvent
• ...
• end sub
• ...
• </SCRIPT>
• The actual subroutine consists of two parts: ObjectName, which is the name of the object you wish to use the event for, specified by EventName. When the event specified by EventName occurs for the object specified by ObjectName the statements in the subroutine are evaluated. A subroutine is always the procedure involved when events are used for different objects and controls. However, other procedures and functions can be called from within that subroutine.

The following listing fragments illustrate two of the aforementioned methods in Listing 11.2. Events are specified as attributes, and are also used as subroutines inside the code. Re-examine this listing again:

First, look at the button control, specified by the <INPUT> tag. It has the attribute OnClick, which is an event that calls the subroutine changes in the <SCRIPT> section. This event, obviously, is when the user clicks the button. In the subroutine changes several properties of the label named MyLabel are changed, as you can see.

Now, examine the second subroutine in the script. Its name is MyLabel_Click. From this, you know that this subroutine is called when the Click event for the object named MyLabel occurs. When this happens, a set of properties for MyLabel are changed. This is the whole logic behind this program.

All events have pneumonic names, so it is easy to tell what an event does. For example, the DblClick event is the double-click event.

Calling Methods

In this section, you will learn how to call methods from your scripts. This section does not examine procedures in detail; it illustrates general syntax and how to call procedures of objects and procedures you create yourself. A procedure is always a function or a subroutine. To call a subroutine from within your script, use the following syntax:

call ProcedureName(arguments)

ProcedureName is the name of the method you are calling, and arguments (surrounded in brackets) are any values that are passed to that procedure (arguments for a procedure are not required, unless that specific subroutine or function requires them). As previously mentioned, you always use the subroutine method when events happen to objects. For example:

The statements in the subroutine are evaluated when the Click event for MyObject occurs. This would not work for a function, because a function is a procedure which returns a value. Subroutines can return values as well, but the function itself is returned as a value. For example:

However, different objects do have methods which are functions as well subroutines.

Remember, you can also use the same general syntax expressed previously for calling methods of an Object or a control. Listing 11.3 shows an example of a subroutine and a function call in a script, as well as calling a method from the ActiveX Label Object. Figure 11.3 illustrates Listing 11.3. The file, ACTVX12.HTM can be found on the CD that comes with this book.

Listing 11.3 ACTVX12.HTMùThis Listing Demonstrates the Use of Procedures in VBScript

FIG. 11.3

This figure illustrates two controls. When the label is clicked the About Box method is called. The input boxes are used to calculate the sine of a given angle (in degrees).

Basically how this program works is: when the user clicks on the label, the About Box of that label is shown. When the user enters a number in the first input box which is preceeded by the text ôEnter Angleö and clicks the button, the number is then converted into radians and the sine for that angle is calculated and displayed.

There are several methods used in the code; this section discusses them as they appear in the <SCRIPT> tag. The first procedure is called when the user clicks on the button named button1; this happens to be the only button on the page. When this event occurs, a series of methods are called.

First, all the variables you are going to use for this program are declared. Next, the value that the user specifies in the input box named AngleInpt is retrieved. Next, a function is called that passes an argument which is the value specified by AngleInpt. This function converts the angle from degrees to radians, then calculates the sine of that angle (radians are the base angle measure for trigonometric intrinsic functions of Visual Basic Script). That value is assigned to the name of the function (getsin) which then returns the value to the variable we specified it to return to. Finally, this value is displayed in the text box named SineInpt. Simply, the two methods involved in this entire process are the button1_OnClick subroutine (which, if you remember, is called when the user clicks on the button) and the function getsin(angle) (angle is the argument which is used to convert the angle measure into radians).

The methods used with the ActiveX label control are very unsophisticated. Basically, there are two methods involved: the one that is called when the label is clicked on (ieLabel1_Click), and the method that is called inside that method (ieLabel.AboutBox(). Methods are usually called from various objects using the following syntax:

call ObjectName.MethodName()

Remember the call keyword from the former syntax section; its purpose is to call the specified method. ObjectName is the name of the object you wish to call the method for, and MethodName() is the name of the method for that object you are calling. The object name and the called method are separated by a . (period). Also, the brackets immediately following MethodName are not required for a method so long as no arguments are used with the method.

Using the Internet Explorer 3.0 Object Model

This section briefly discusses the Internet Explorer 3.0 Object Model and the various objects associated with it. This section highlights the main portions of the Internet Explorer 3.0 Object model, which includes the Window Object, the Document Object, the Frames Object and a few others. Figure 11.4 shows the hierarchy of the objects used in the Internet Explorer 3.0.

FIG. 11.4

This figure illustrates how all the objects of the Internet Explorer 3.0 Object Model are related. The six objects shown are child objects of the document object at the top of the figure.

In Figure 11.4, all the objects are child objects of the Window Object. The Window Object represents Internet Explorer and its methods, properties, and events, as well as the 6 following objects in its entirety. The Window Object has several methods, properties, and events. Some of these key methods, properties, and events are listed in Tables 11.5û11.7. The Window object is the default object; you do not have to append any of its properties or child objects to it in Visual Basic Script. For example, instead of:

window.name

You could just use:

name

Table 12.5 The Properties of the Window Object

Table 12.6 Some Key Methods of the Window Object

Table 12.7 Some Key Events of the Window Object Model.

Using the Document Object

The Document object primarily deals with the body of an HTML page. It has three child objects: the Link, Anchor, and Form object. Each of these objects are an indexed array of the number of links, anchors and forms found on a document. The Form object further contains the Element object, which is a indexed array of all the objects and controls on the page. Some key properties and methods are listed in Tables 11.8 and 11.9; no events exist for the document object.

Table 12.8 Some Key Procedures of the Document Object

Table 12.9 Some Key Methods of the Document Object

Using the Frame Object

The Frame Object is an indexed array of the number of frames on a page. The first frame of the index corresponds to the frame in the uppermost left hand corner of the browser. You can use this object to set or get different URLS of the different frames that are on the page. The frame array is similar to the window object in that it can use the other objects in the same manner. For example, you can use the location object to get or set the location of the corresponding frame, and you can use the history object too navigate through that frameÆs history.

Using the History Object

The History Object's main purpose is to access the history list of the browser. This history list lists all the places you have visited during your Internet sessions with this version of Internet Explorer 3.0 (beta 2). There are a few properties for this tag, and three methods which are used to navigate through the history folder. Some key properties, and methods are listed in Tables 11.10 and 11.11. The history object has no events.

Table 12.10 Some Key Properties of the History Object

Table 12.11 Some Key Methods of the History Object

Using the Location Object

The Location Object is used to provide information about the current location of Internet Explorer. Some key properties are listed in table 11.12. There are no events or methods for the Location Object.

Table 12.12 Key Properties of the Location Object

Using the Navigator Object

The Navigator Object is used to provide application information about the browser. Some of this information includes the code name of the application, the user agent of the application, the name and version of the application. Some key properties are listed in table 11.13.

Table 12.13 Some Key Properties of the Navigator Object.

Using the Script Object

The Script Object was covered fully under the "Looking Closer at the <SCRIPT> Tag" section earlier in this chapter.

Using ActiveX Controls and the ActiveX Control Pad

This section describes some of the ActiveX controls you can use with your application and briefly overviews the ActiveX control pad and its usefulness in designing an Application for your Web Page. There are several ActiveX controls which are included with the ActiveX control pad which are dysfunctional or behave in an unusual manner. You can find information about all the ActiveX control's properties, methods and events with the extensive help provided with the control pad. The script wizard also enables you to easily embed scripts in you HTML document that enable you to seamlessly interact with the ActiveX controls or other elements you have defined for a page. The following list describes some ActiveX controls and their usefulness in designing a Visual Basic Script Application:

• The Label Control: The Label Control is a pretty interesting control. Not only can you set different values to font sizes, captions, foreground and background colors, but you can also set values for different points on the label which gives the text an irregular "twisted" effect.
• The Tab Control: By using the Tab Control, you can easily set and present numerous options with a slick "tab" interface as seen with many applications.
• The Image Control: The Image control is used to specify an image to be put on the page or layout.
• The Text Box Control: The text box control is virtually the same control as the one specified by the <INPUT> tag.
• The Button Control: The button control is virtually the same control as the one specified by the <INPUT> tag.
• The Combo/Drop-down List Controls: The Combo/Drop-down List Controls can contain a list from which you can select multiple entries, or a drop-down menu from which the user can choose options. These controls are similar to the controls specified by the <SELECT> tag.
• The ActiveX Layout Control: This control is the most important control for designing your Visual Basic Script applications on your Web page. With it, you have absolute control over the layout of your page. Formerly, all blank space beyond two spaces in HTML was considered "white space" and was collapsed accordingly. This ActiveX control actually references a file with all the ActiveX controls on this layout and any code associated with them.

From Here...

In this chapter, you have learned the bare essentials of designing a Visual Basic Script application. You now have an understanding of how objects and their events, methods and properties work. You now know how to use Visual Basic Script to call procedures based on different events that occur for an object, and you are familiar with how to call and define procedures. You've also learned about a few ActiveX controls which can help you design your application. Remember, there are many more ActiveX controls in the ActiveX control pad than are mentioned here, but some are defunct due to licensing problems with Internet Explorer 3.0 beta 1, which will be resolved in the next release. There are over 2,500 commercially-available ActiveX controls.

In the chapters that follow, you will be provided with an extensive overview of the syntactical elements of the Visual Basic Script language, and a comparison to other Visual Basic family languages and Java script. Some of these chapters include:

• Chapter 14, "Comparing Scripting Languages," discusses the differences between Visual Basic Script (VBScript), Visual Basic for Applications (VBA) and Visual Basic (VB).
• Chapter 15, "VBScript Data Types and Variables," begins the long chain of chapters that explain the different elements of Visual Basic Script, including Variants and Data types, Procedures, Operators and other elements of the Visual Basic Scripting language.
• Later chapters in Part 5 cover the multimedia aspects of the Internet, such as Active VRML and serving multimedia content across Web servers.